<template>
  <div class="order-container">
    <div class="top">
      <div class="left">
        <el-input placeholder="請輸入訂單編號"></el-input>
        <el-input placeholder="請輸入客戶名稱" style="margin: 0 15px"></el-input>
        <el-select placeholder="全部">
          <el-option></el-option>
        </el-select>
        <el-date-picker placeholder="年-月-日" style="margin-left: 15px"></el-date-picker>
        <div class="btn-list">
          <el-button type="primary">搜索</el-button>
          <el-button>重置</el-button>
        </div>
      </div>
      <div class="right">
        <el-button>
          <svg-icon icon-class="import"></svg-icon>
          導入
        </el-button>
        <el-button>
          <svg-icon icon-class="export"></svg-icon>
          導出
        </el-button>
        <el-button type="primary" @click.native="addOrder">
          <svg-icon icon-class="staff-add"></svg-icon>
          新增訂單
        </el-button>
      </div>
    </div>
    <div class="table-wrap br-20">
      <h4>訂單列表</h4>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="訂單編號">
          <template>
            <div>
              <div class="text-1">QUOTE-2024-001</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="客戶名稱">
          <template>
            <div class="awatar-info-wrap">
              <svg-icon icon-class="awatar"></svg-icon>
              <div>
                <div class="text-1">張三</div>
                <div class="text-2">策劃部-高級策劃師</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="訂單金額">
          <template>
            <div class="text-1">￥2580.00</div>
            <div class="text-2">含增值稅</div>
          </template>
        </el-table-column>
        <el-table-column label="訂單日期">
          <template>張三</template>
        </el-table-column>
        <el-table-column label="狀態">
          <template>
            <span class="status success">已成交</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text" size="small" @click.native="orderDetailVisible = true">檢視</el-button>
            <el-button type="text" size="small" @click.native="editOrder">編輯</el-button>
            <el-button type="text" size="small">刪除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-foot">
        <div>
          <el-pagination background layout="sizes, prev, pager, next, jumper" :total="1000"></el-pagination>
        </div>
      </div>
    </div>

    <el-dialog :title="editOrderTitle" class="add-receipt-dialog" :visible.sync="addOrderVisible" width="680px">
      <el-form :model="addOrderFormData" label-position="top" inline>
        <div class="base-info">
          <h5>基本資訊</h5>
          <div class="base">
            <el-form-item label="訂單編號">
              <el-input v-model="addOrderFormData.name" autocomplete="off" placeholder="請輸入訂單編號"></el-input>
            </el-form-item>
            <el-form-item label="客戶名稱">
              <el-input v-model="addOrderFormData.name" autocomplete="off" placeholder="請輸入客戶名稱"></el-input>
            </el-form-item>
            <el-form-item label="订单金额">
              <el-input v-model="addOrderFormData.name" autocomplete="off" placeholder="請輸入订单金额"></el-input>
            </el-form-item>
            <el-form-item label="訂單日期">
              <el-date-picker v-model="addOrderFormData.name" type="date" placeholder="年-月-日"></el-date-picker>
            </el-form-item>
            <el-form-item label="狀態">
              <el-select v-model="addOrderFormData.name" placeholder="請選擇狀態">
                <el-option v-for="item in 4" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addOrderVisible = false">取消</el-button>
        <el-button type="primary" @click="submitAddOrder">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog class="order-detail-dialog" title="收據詳情" width="680px" :visible.sync="orderDetailVisible">
      <div class="detail">
        <div class="detail-item">
          <span>訂單編號:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>訂單名稱:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>金額:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>訂單日期:</span>
          <span></span>
        </div>
        <div class="detail-item">
          <span>狀態:</span>
          <span></span>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="orderDetailVisible = false">關閉</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'order-management',
  data() {
    return {
      tableData: [{}],
      orderDetailVisible: false,
      addOrderVisible: false,
      editOrderTitle: '新增訂單',
      addOrderFormData: {},
      detailData: [],
      imageUrl: ''
    }
  },
  methods: {
    addOrder() {
      this.addOrderVisible = true
      this.editOrderTitle = '新增訂單'
    },
    editOrder() {
      this.addOrderVisible = true
      this.editOrderTitle = '編輯訂單'
    },
    submitAddOrder() {}
  }
}
</script>

<style scoped lang="less">
.order-container {
  .top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .left {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .el-input {
        width: 200px;
      }
      .el-select {
        width: 140px;
      }
      .el-date-picker {
        width: 150px;
      }
      .btn-list {
        margin-left: 15px;
      }
    }
  }
  .table-wrap {
    background: #fff;
    padding: 25px 30px;
    h4 {
      font-size: 18px;
      line-height: 25px;
      margin: 0 0 25px 0;
    }
    .el-table {
      .awatar-info-wrap {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
        .svg-icon {
          font-size: 39px;
          margin-right: 10px;
        }
      }
    }
    .table-foot {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
    }
  }
  .order-detail-dialog {
    .detail {
      background: rgba(60, 88, 252, 0.05);
      padding: 24px 26px;
      &-item {
        display: flex;
        justify-content: flex-start;
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 23px;
      }
    }
  }
}
</style>
